<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-sm-12 col-md-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{l("Settings")}}</span>
                </h3>
                <span class="m-section__sub">
                    {{l("SettingsHeaderInfo")}}
                </span>
            </div>
            <div class="col-sm-12 col-md-6 text-right">
                <button class="btn btn-primary" (click)="saveAll()"><i class="la la-floppy-o"></i> {{l("SaveAll")}}</button>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <tabset class="tab-container" *ngIf="settings">
                    <tab heading="{{l('General')}}" *ngIf="showTimezoneSelection" [active]="activeTabIndex == 0" customClass="m-tabs__item">
                        <div class="form-group" *ngIf="showTimezoneSelection">
                            <label>{{l("Timezone")}}</label>
                            <timezone-combo [(selectedTimeZone)]="settings.general.timezone" defaultTimezoneScope="{{defaultTimezoneScope}}"></timezone-combo>
                        </div>
                    </tab>
                    <tab *ngIf="true" heading="{{l('Appearance')}}" [active]="activeTabIndex == 1" customClass="m-tabs__item">
                        <div class="row m-form">
                            <div class="col-md-6">
                                <h5>{{l("ApplicationLogo")}}</h5>
                                <form #logoUploadForm>
                                    <div class="form-group">
                                        <input type="file" ng2FileSelect [uploader]="logoUploader" class="col-lg-12" required />
                                        <span class="m-form__help col-lg-12">{{l("UploadLogo_Info")}}</span>
                                    </div>
                                    <button class="btn btn-primary" type="button" (click)="uploadLogo()">{{l("Upload")}}</button>
                                    <button class="btn btn-default" type="button" (click)="clearLogo()">{{l("Clear")}}</button>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <h5>{{l("CustomCSS")}}</h5>
                                <p *ngIf="appSession.tenant.customCssId"><a [href]="remoteServiceBaseUrl + '/TenantCustomization/GetCustomCss?id=' + appSession.tenant.customCssId" target="_blank">{{l('Download')}}</a></p>
                                <form #cssUploadForm>
                                    <div class="form-group">
                                        <input type="file" ng2FileSelect [uploader]="customCssUploader" class="col-lg-12" required />
                                        <span class="m-form__help col-lg-12">{{l("UploadCSS_Info")}}</span>
                                    </div>
                                    <button class="btn btn-primary" type="button" (click)="uploadCustomCss()">{{l("Upload")}}</button>
                                    <button class="btn btn-default" type="button" (click)="clearCustomCss()">{{l("Clear")}}</button>
                                </form>
                            </div>
                        </div>
                    </tab>
                    <tab *ngIf="true" heading="{{l('UserManagement')}}" customClass="m-tabs__item">
                        <div class="m-form">
                            <h5>{{l("FormBasedRegistration")}}</h5>
                            <div class="m-checkbox-list">
                                <div class="form-group m-form__group">
                                    <label for="Setting_AllowSelfRegistration" class="m-checkbox">
                                        <input id="Setting_AllowSelfRegistration" class="m-check" type="checkbox" name="AllowSelfRegistration" [(ngModel)]="settings.userManagement.allowSelfRegistration">
                                        {{l("AllowUsersToRegisterThemselves")}}
                                        <span></span>
                                    </label>
                                    <span class="m-form__help">{{l("AllowUsersToRegisterThemselves_Hint")}}</span>
                                </div>
                                <div class="form-group m-form__group">
                                    <label for="Setting_IsNewRegisteredUserActiveByDefault" class="m-checkbox">
                                        <input id="Setting_IsNewRegisteredUserActiveByDefault" type="checkbox" name="IsNewRegisteredUserActiveByDefault" [(ngModel)]="settings.userManagement.isNewRegisteredUserActiveByDefault">
                                        {{l("NewRegisteredUsersIsActiveByDefault")}}
                                        <span></span>
                                    </label>
                                    <span class="m-form__help">{{l("NewRegisteredUsersIsActiveByDefault_Hint")}}</span>
                                </div>
                                <label for="Setting_UseCaptchaOnRegistration" class="m-checkbox" [hidden]="!settings.userManagement.allowSelfRegistration">
                                    <input id="Setting_UseCaptchaOnRegistration" type="checkbox" name="UseCaptchaOnRegistration" [(ngModel)]="settings.userManagement.useCaptchaOnRegistration">
                                    {{l("UseCaptchaOnRegistration")}}
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div *ngIf="!isMultiTenancyEnabled && settings.ldap.isModuleEnabled">
                            <h5>{{l("LdapSettings")}}</h5>
                            <label for="Setting_LdapIsEnabled" class="m-checkbox">
                                <input id="Setting_LdapIsEnabled" type="checkbox" name="LdapIsEnabled" [(ngModel)]="settings.ldap.isEnabled">
                                {{l("EnableLdapAuthentication")}}
                                <span></span>
                            </label>
                            <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                <label>{{l("DomainName")}}</label>
                                <input type="text" name="LdapDomainName" class="form-control" [(ngModel)]="settings.ldap.domain" maxlength="128">
                            </div>
                            <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                <label>{{l("UserName")}}</label>
                                <input type="text" name="LdapUserName" class="form-control" [(ngModel)]="settings.ldap.userName" maxlength="128">
                            </div>
                            <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                <label>{{l("Password")}}</label>
                                <input type="password" name="LdapPassword" class="form-control" [(ngModel)]="settings.ldap.password" maxlength="128">
                            </div>
                        </div>
                        <div>
                            <h5 class="margin-top-20">{{l("OtherSettings")}}</h5>
                            <label for="Setting_IsEmailConfirmationRequiredForLogin" class="m-checkbox">
                                <input id="Setting_IsEmailConfirmationRequiredForLogin" type="checkbox" name="IsEmailConfirmationRequiredForLogin" [(ngModel)]="settings.userManagement.isEmailConfirmationRequiredForLogin">
                                {{l("EmailConfirmationRequiredForLogin")}}
                                <span></span>
                            </label>
                        </div>
                    </tab>
                    <tab *ngIf="true" heading="{{l('Security')}}" customClass="m-tabs__item">
                        <!-- *ngIf="true" is a workaround for https://github.com/valor-software/ng2-bootstrap/issues/823 -->
                        <div>
                            <h5>{{l("PasswordComplexity")}}</h5>
                            <label for="Setting_PasswordComplexity_UseDefaultSettings" class="m-checkbox">
                                <input id="Setting_PasswordComplexity_UseDefaultSettings" type="checkbox" name="Setting_PasswordComplexity_UseDefaultSettings" [(ngModel)]="settings.security.useDefaultPasswordComplexitySettings">
                                {{l("UseDefaultSettings")}}
                                <span></span>
                            </label>
                            <div class="m-checkbox-list">
                                <label for="Setting_PasswordComplexity_RequireDigit" class="m-checkbox">
                                    <input id="Setting_PasswordComplexity_RequireDigit" type="checkbox" name="Setting_PasswordComplexity_RequireDigit"
                                           [(ngModel)]="settings.security.passwordComplexity.requireDigit" *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                    <input id="Setting_PasswordComplexity_RequireDigit" type="checkbox" name="Setting_PasswordComplexity_RequireDigit"
                                           [(ngModel)]="settings.security.defaultPasswordComplexity.requireDigit" *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                           disabled>
                                    {{l("PasswordComplexity_RequireDigit")}}
                                    <span></span>
                                </label>
                                <label for="Setting_PasswordComplexity_RequireLowercase" class="m-checkbox">
                                    <input id="Setting_PasswordComplexity_RequireLowercase" type="checkbox" name="Setting_PasswordComplexity_RequireLowercase"
                                           [(ngModel)]="settings.security.passwordComplexity.requireLowercase" *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                    <input id="Setting_PasswordComplexity_RequireLowercase" type="checkbox" name="Setting_PasswordComplexity_RequireLowercase"
                                           [(ngModel)]="settings.security.defaultPasswordComplexity.requireLowercase" *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                           disabled>
                                    {{l("PasswordComplexity_RequireLowercase")}}
                                    <span></span>
                                </label>
                                <label for="Setting_PasswordComplexity_RequireNonAlphanumeric" class="m-checkbox">
                                    <input id="Setting_PasswordComplexity_RequireNonAlphanumeric" type="checkbox" name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                           [(ngModel)]="settings.security.passwordComplexity.requireNonAlphanumeric" *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                    <input id="Setting_PasswordComplexity_RequireNonAlphanumeric" type="checkbox" name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                           [(ngModel)]="settings.security.defaultPasswordComplexity.requireNonAlphanumeric" *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                           disabled>
                                    {{l("PasswordComplexity_RequireNonAlphanumeric")}}
                                    <span></span>
                                </label>
                                <label for="Setting_PasswordComplexity_RequireUppercase" class="m-checkbox">
                                    <input id="Setting_PasswordComplexity_RequireUppercase" type="checkbox" name="Setting_PasswordComplexity_RequireUppercase"
                                           [(ngModel)]="settings.security.passwordComplexity.requireUppercase" *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                    <input id="Setting_PasswordComplexity_RequireUppercase" type="checkbox" name="Setting_PasswordComplexity_RequireUppercase"
                                           [(ngModel)]="settings.security.defaultPasswordComplexity.requireUppercase" *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                           disabled>
                                    {{l("PasswordComplexity_RequireUppercase")}}
                                    <span></span>
                                </label>
                            </div>
                            <div class="form-group">
                                <label>{{l("PasswordComplexity_RequiredLength")}}</label>
                                <input type="number" name="RequiredLength" class="form-control" [ngClass]="{'edited':settings.security.passwordComplexity.requiredLength}"
                                       [(ngModel)]="settings.security.passwordComplexity.requiredLength" *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                <input type="number" name="RequiredLength" class="form-control" [ngClass]="{'edited':settings.security.defaultPasswordComplexity.requiredLength}"
                                       [(ngModel)]="settings.security.defaultPasswordComplexity.requiredLength" *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                       disabled>
                            </div>
                        </div>
                        <div>
                            <h5>{{l("UserLockOut")}}</h5>
                            <div class="md-checkbox-list">
                                <div>
                                    <label for="Setting_UserLockOut_IsEnabled" class="m-checkbox">
                                        <input id="Setting_UserLockOut_IsEnabled" type="checkbox" name="Setting_UserLockOut_IsEnabled" [(ngModel)]="settings.security.userLockOut.isEnabled">
                                        {{l("EnableUserAccountLockingOnFailedLoginAttemts")}}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group" *ngIf="settings.security.userLockOut.isEnabled">
                                <label>{{l("MaxFailedAccessAttemptsBeforeLockout")}}</label>
                                <input type="number" name="MaxFailedAccessAttemptsBeforeLockout" class="form-control" [ngClass]="{'edited':settings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout}" [(ngModel)]="settings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout">
                            </div>
                            <div class="form-group" *ngIf="settings.security.userLockOut.isEnabled">
                                <label>{{l("DefaultAccountLockoutDurationAsSeconds")}}</label>
                                <input type="number" name="DefaultAccountLockoutSeconds" class="form-control" [ngClass]="{'edited':settings.security.userLockOut.defaultAccountLockoutSeconds}" [(ngModel)]="settings.security.userLockOut.defaultAccountLockoutSeconds">
                            </div>
                        </div>
                        <div *ngIf="!isMultiTenancyEnabled || settings.security.twoFactorLogin.isEnabledForApplication">
                            <h5>{{l("TwoFactorLogin")}}</h5>
                            <div class="m-checkbox-list">
                                <label for="Setting_TwoFactorLogin_IsEnabled" class="m-checkbox">
                                    <input id="Setting_TwoFactorLogin_IsEnabled" type="checkbox" name="Setting_TwoFactorLogin_IsEnabled" [(ngModel)]="settings.security.twoFactorLogin.isEnabled">
                                    {{l("EnableTwoFactorLogin")}}
                                    <span></span>
                                </label>
                                <label for="Setting_TwoFactorLogin_IsEmailProviderEnabled" class="m-checkbox" *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                    <input id="Setting_TwoFactorLogin_IsEmailProviderEnabled" type="checkbox" name="Setting_TwoFactorLogin_IsEmailProviderEnabled" [(ngModel)]="settings.security.twoFactorLogin.isEmailProviderEnabled">
                                    {{l("IsEmailVerificationEnabled")}}
                                    <span></span>
                                </label>
                                <label for="Setting_TwoFactorLogin_IsSmsProviderEnabled" class="m-checkbox" *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                    <input id="Setting_TwoFactorLogin_IsSmsProviderEnabled" type="checkbox" name="Setting_TwoFactorLogin_IsSmsProviderEnabled" [(ngModel)]="settings.security.twoFactorLogin.isSmsProviderEnabled">
                                    {{l("IsSmsVerificationEnabled")}}
                                    <span></span>
                                </label>
                                <label for="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled" class="m-checkbox" *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                    <input id="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled" type="checkbox" name="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled"
                                           [(ngModel)]="settings.security.twoFactorLogin.isGoogleAuthenticatorEnabled">
                                    {{l("IsGoogleAuthenticatorEnabled")}}
                                    <span></span>
                                </label>
                                <label for="Setting_TwoFactorLogin_IsRememberBrowserEnabled" class="m-checkbox" *ngIf="settings.security.twoFactorLogin.isEnabled">
                                    <input id="Setting_TwoFactorLogin_IsRememberBrowserEnabled" type="checkbox" name="Setting_TwoFactorLogin_IsRememberBrowserEnabled" [(ngModel)]="settings.security.twoFactorLogin.isRememberBrowserEnabled">
                                    {{l("AllowToRememberBrowserForTwoFactorLogin")}}
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </tab>
                    <tab heading="{{l('EmailSmtp')}}" *ngIf="!isMultiTenancyEnabled" customClass="m-tabs__item">
                        <div class="form-group">
                            <label>{{l("DefaultFromAddress")}}</label>
                            <input type="email" name="DefaultFromAddress" class="form-control" [ngClass]="{'edited':settings.email.defaultFromAddress}" [(ngModel)]="settings.email.defaultFromAddress" maxlength="128">
                        </div>
                        <div class="form-group">
                            <label>{{l("DefaultFromDisplayName")}}</label>
                            <input type="text" name="DefaultFromDisplayName" class="form-control" [ngClass]="{'edited':settings.email.defaultFromDisplayName}" [(ngModel)]="settings.email.defaultFromDisplayName" maxlength="128">
                        </div>
                        <div class="form-group">
                            <label>{{l("SmtpHost")}}</label>
                            <input type="text" name="SmtpHost" class="form-control" [ngClass]="{'edited':settings.email.smtpHost}" [(ngModel)]="settings.email.smtpHost" maxlength="64">
                        </div>
                        <div class="form-group">
                            <label>{{l("SmtpPort")}}</label>
                            <input type="number" name="SmtpPort" class="form-control" [ngClass]="{'edited':settings.email.smtpPort}" [(ngModel)]="settings.email.smtpPort" maxlength="5">
                        </div>
                        <div class="m-checkbox-list">
                            <label for="Settings_SmtpEnableSsl" class="m-checkbox">
                                <input id="Settings_SmtpEnableSsl" type="checkbox" name="SmtpEnableSsl" [(ngModel)]="settings.email.smtpEnableSsl">
                                {{l("UseSsl")}}
                                <span></span>
                            </label>
                            <label for="Settings_SmtpUseDefaultCredentials" class="m-checkbox">
                                <input id="Settings_SmtpUseDefaultCredentials" type="checkbox" name="SmtpUseDefaultCredentials" [(ngModel)]="settings.email.smtpUseDefaultCredentials">
                                {{l("UseDefaultCredentials")}}
                                <span></span>
                            </label>
                        </div>
                        <div class="form-group" [hidden]="settings.email.smtpUseDefaultCredentials">
                            <label>{{l("DomainName")}}</label>
                            <input type="text" name="SmtpDomainName" class="form-control" [ngClass]="{'edited':settings.email.smtpDomain}" [(ngModel)]="settings.email.smtpDomain" maxlength="128">
                        </div>
                        <div class="form-group" [hidden]="settings.email.smtpUseDefaultCredentials">
                            <label>{{l("UserName")}}</label>
                            <input type="text" name="SmtpUserName" class="form-control" [ngClass]="{'edited':settings.email.smtpUserName}" [(ngModel)]="settings.email.smtpUserName" maxlength="128">
                        </div>
                        <div class="form-group" *ngIf="!setRandomPassword" [hidden]="settings.email.smtpUseDefaultCredentials">
                            <label>{{l("Password")}}</label>
                            <input type="password" name="SmtpPassword" class="form-control" [ngClass]="{'edited':settings.email.smtpPassword}" [(ngModel)]="settings.email.smtpPassword" maxlength="128">
                        </div>
                        <hr />
                        <h5>{{l("TestEmailSettingsHeader")}}</h5>
                        <div class="row">
                            <div class="form-group col-md-4">
                                <input type="text" class="form-control input-mini" [(ngModel)]="testEmailAddress">
                            </div>
                            <div class="form-group col-md-2">
                                <button class="btn btn-primary" type="button" (click)="sendTestEmail()">{{l("SendTestEmail")}}</button>
                            </div>
                        </div>
                    </tab>
                    <tab *ngIf="true" heading="{{l('Invoice')}}" customClass="m-tabs__item">
                        <!-- *ngIf="true" is a workaround for https://github.com/valor-software/ng2-bootstrap/issues/823 -->
                        <h5>{{l("InvoiceInformation")}}</h5>
                        <div class="form-group">
                            <label>{{l("LegalName")}}</label>
                            <input type="text" name="legalName" class="form-control" [ngClass]="{'edited':settings.billing.legalName}" [(ngModel)]="settings.billing.legalName" maxlength="64">
                        </div>
                        <div class="form-group">
                            <label>{{l("Address")}}</label>
                            <textarea rows="5" name="address" class="form-control" [ngClass]="{'edited':settings.billing.address}" [(ngModel)]="settings.billing.address" maxlength="256"></textarea>
                        </div>
                        <div class="form-group">
                            <label>{{l("Tax/VatNo")}}</label>
                            <input type="text" name="taxVatNo" class="form-control" [ngClass]="{'edited':settings.billing.taxVatNo}" [(ngModel)]="settings.billing.taxVatNo" maxlength="32">
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
</div>
